<template>
	<view>
		<view class=" nav space-between center">
			<u-tabs @click="clicktab" :list="list4" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
			<view class="all" @click="toSearchPage">
				<text>查看更多</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<view>
			<view class="dtitem" v-for="(item, index) in courseData" :key="index">
				<view class="space-between center">
					<view class="row">
						<view>
							<image class="rr" :src="item.userInfo.headimgurl"></image>
						</view>
						<view class="dtitem-a">
							<view class="center dtitem-aa">
								<view class="dtitem-name">{{ item.userInfo.nickname_pl }}</view>
								<view>
									<image v-if="item.userInfo.gender == '女'" class="sex" src="/static/images/nv.png"></image>
									<image v-else class="sex" src="/static/images//nan.png"></image>
								</view>
							</view>
							<view class="dtitem-time">{{ item.create_time }}</view>
						</view>
					</view>
					<!-- <view><view class="qzt center" @click="phone(item.userInfo.phone)">去找Ta</view></view> -->
				</view>
				<view class="dtitme-c">{{ item.content }}</view>
				<view style="margin-top: 20rpx;" class="zdhh">
					<view style="margin-right: 20rpx;margin-top: 10rpx;" v-for="(itemt, indext) in item.img" :key="indext">
						<image class="dtitme-d" :src="itemt"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const lineBg = '/static/images/hk.png';

	export default {
		components: {},
		data() {
			return {
				lineBg,
				list4: [{
						name: '推荐动态'
					},
					{
						name: '最新动态'
					}
				]
			};
		},

		methods: {
			clicktab(item) {
				if (item.name == '推荐动态') {
					this.$emit('sfcx', 1);
				} else {
					this.$emit('sfcx', 2);
				}
			},
			phone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 跳转到搜索页查询对应数据
			toSearchPage() {
				this.navTo('/pages/zxhd/dtlist');
			}
		},
		props: {
			name: {
				type: String,
				default: '相亲活动'
			},

			courseData: {
				type: Array
			}
		}
	};
</script>

<style scoped lang="scss">
	.zdhh {
		display: flex;
		flex-wrap: wrap;
	}

	.list-swiper {
		height: 520rpx !important;
	}

	.nav {
		// background: red;
	}

	.dtitem {
		width: 690rpx;
		min-height: 402rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(6, 0, 1, 0.1);
		border-radius: 18rpx;
		padding: 30rpx;
		margin-top: 30rpx;
	}

	.rr {
		width: 88rpx;
		height: 88rpx;
		border-radius: 88rpx;
	}

	.dtitem-a {
		margin-left: 20rpx;
	}

	.dtitem-aa {
		margin-top: 5rpx;
	}

	.dtitem-name {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333333;
	}

	.dtitem-time {
		margin-top: 10rpx;
		font-size: 20rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #9e9d9d;
	}

	.sex {
		width: 26rpx;
		height: 26rpx;
	}

	.all {
		font-weight: normal;
		color: $mxg-text-color-grey;
		font-size: 28rpx;

		.iconfont {
			font-size: 25rpx;
		}
	}

	.qzt {
		background: linear-gradient(to top right, #f35050, #fe9361);

		width: 142rpx;
		height: 42rpx;
		border-radius: 42rpx;
		// background: #FFFFFF;

		font-size: 20rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #fefefe;
	}

	.dtitme-c {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333333;
	}

	.dtitme-d {
		width: 190rpx;
		height: 190rpx;

		border-radius: 18rpx;
	}
</style>